<style>

	#stars-hr-diagram .axis path,
	#stars-hr-diagram .axis line {
		fill: none;
	  	stroke: #CCCCCC;
	  	shape-rendering: crispEdges;
	}

	#stars-hr-diagram .axisTitle {
		text-anchor: middle;
		fill: white;
		font-size: 24px;
		font-weight: 300;
	}	
	#stars-hr-diagram .axisSubtitle {
		text-anchor: middle;
		fill: #AAAAAA;
		font-size: 14px;
		font-weight: 300;
	}

	#stars-hr-diagram .axis text {
		fill: #CCCCCC;
		font-size: 14px;
		font-weight: 300;
	}

  	#stars-hr-diagram .title {
    	font-size: 36px;
    	fill: white;
    	font-weight: 300;
    	text-anchor: start;
  	}

  	#stars-hr-diagram .subtitle {
    	font-size: 16px;
    	fill: #AAAAAA;
    	font-weight: 300;
    	text-anchor: start;
  	}
  
  	#stars-hr-diagram .credit {
    	font-size: 14px;
    	fill: #AAAAAA;
    	font-weight: 300;
    	text-anchor: start;
  	}

</style>

<section id="stars-hr-diagram" data-background="slides/slide_17/galaxy.jpg" data-background-size="500px" data-background-repeat="repeat">
	<div id="starsHRDiagram"></div>
	<span class="fragment"></span>
	<span class="fragment"></span>
	<span class="fragment"></span>
</section>